<template>
<div>
  <div v-for="item in 3" :key="item">
      <div class="kaiju">
      <div class="tab1"><span>订单号：</span><span>11</span><span>房间号：</span><span>11</span>
      <span>时间：</span><span>11</span><strong>已付款</strong>
      </div>
      <div class="tab2"><span>购买项目</span><span>数量</span><span>技师</span>价格<span>合计</span></div>
      <div class="tab3"><span>购买项目</span><span>数量</span><span>技师</span>价格<span>合计</span></div>
      </div>
  </div>
</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.tab2{
    span{
        margin-left:20px;
        line-height: 20px;
    }
}
 .kaiju{
     width:620px;
     height:100px;
     border:1px solid black;
     margin-top:60px;
 }
 .tab1{
     width:100%;
     height:30%;
   background: rgb(161, 160, 160);
     line-height: 20px;
 }
 .tab2{
     width:100%;
     height:30%;

     line-height: 20px;
 }
 .tab3{
     width:100%;
     height:30%;
     
     line-height: 20px;
     span{
         margin-left:20px;
     }
 }

</style>